<template>
  <view class="my-content-info">
    <view class="my-top">
      <view class="content">
        <u-cell-group>
          <u-cell :isLink="true">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">头像</text>
            </view>
            <view slot="value" class="ava">
              <!-- <open-data type="userAvatarUrl"></open-data
            > -->
              <button
                class="avatar-wrapper"
                open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar"
              >
                <image class="avatar" :src="avatarUrl || avatar"></image>
              </button>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">手机号</text>
            </view>
            <text slot="value" class="tips1">
              <text class="u-cell-text">{{
                dealNum("phone", userInfo.userName) || "--"
              }}</text></text
            >
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content">
        <u-cell-group>
          <u-cell :isLink="true" @click="toPage('/pages/user/certify')">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">实名认证</text>
            </view>
            <view slot="value" class="u-cell21">
              <text v-if="userInfo.realName && verFlag">
                {{ dealNum("name", userInfo.realName) }}</text
              >
              <text v-else class="u-cell2">未认证</text>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell-text">昵称</text>
            </view>
            <text slot="value" class="tips1">
              <text class="u-cell-text">{{
                userInfo.nickName || "--"
              }}</text></text
            >
          </u-cell>
        </u-cell-group>
      </view>
    </view>
	<view class="out-btn" @click="getSubmit">
			  退出登录
	</view>
  </view>
</template>

<script>
import {
  getStoreData,
  dealNum,
  setStoreData,
  httpPost,
  httpGet,
} from "@/utils/http.js";
const pic1 = require(`@/img/my/my1.png`);
const avatar = require(`@/img/my/avatar1.jpg`);
export default {
  data() {
    return {
      avatar,
      avatarUrl: "",
      dealNum,
      pic1,
      userInfo: {},
      verFlag: false,
    };
  },
  onLoad() {
    this.userInfo = getStoreData("userInfo");
    const avatarUrl = getStoreData("avatarUrl");
    if (avatarUrl) {
      this.avatarUrl = avatarUrl;
    }
    const _this = this;
    Promise.all([this.getInfo()]).then((res) => {
      _this.getVer();
    });
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      setStoreData("avatarUrl", avatarUrl);
      this.avatarUrl = avatarUrl;
    },
    getInfo() {
      const _this = this;
      httpGet("/api/user/info")
        .then((res) => {
          _this.userInfo = res.data;
          setStoreData("userInfo", _this.userInfo);
        })
        .catch((e) => {
          _this.userInfo = {};
        });
    },
    getVer() {
      const _this = this;
      httpGet("/api/userverify/ok")
        .then((res) => {
          if (res.data.approveStatus >= 20) {
            _this.verFlag = true;
            _this.userInfo = {
              ...this.userInfo,
              ...res.data,
            };
          }
        })
        .catch((e) => {
          _this.verFlag = false;
        });
    },
    toPage(v) {
      uni.navigateTo({
        url: v,
      });
    },
	getSubmit() {
	  uni.clearStorage();
	  uni.redirectTo({
	    url: "/pages/index/index",
	  });
	}
  },
};
</script>

<style lang="scss">
.my-content-info {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  width: 100vw;
  min-height: calc(100vh - 32px);
  padding: 16px;
  .u-cell21 {
    text-align: right;
    width: 60%;
  }
  .u-cell2 {
    font-size: 14px;
    color: #f39d21;
    width: 100%;
    display: inline-block;
    text-align: right;
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    width: calc(100vw - 32px);
    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
  }
  .my-top {
    display: flex;
    width: 100%;
    flex-direction: column;
    .ava {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
      .avatar-wrapper {
        padding: 0;
        margin: 0;
        width: 40px;
        height: 40px;
        border: none;
        &::after {
          border: none !important;
        }
      }
      .avatar {
        width: 40px;
        height: 40px;
      }
    }
  }
}
.out-btn{
	background-color: #EF684B;
	width: 100%;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	border-radius:10rpx;
	margin-top: 80rpx;
}
</style>
